<template>
  <div class="home">
    <div class="page-header">
      <h1>MCP 工具市场</h1>
      <p>探索和使用企业内部的MCP工具</p>
      
      <div class="action-buttons">
        <el-button type="primary" @click="$router.push('/create-tool')">
          <el-icon><Plus /></el-icon>
          添加新MCP工具
        </el-button>
      </div>
    </div>

    <el-skeleton v-if="loading" :rows="3" animated />

    <div v-else>
      <div v-for="(categoryGroup, index) in toolsByCategory" :key="index" class="category-section">
        <h2 class="category-title">{{ categoryGroup.category.name }}</h2>
        <el-row :gutter="20">
          <el-col v-for="tool in categoryGroup.tools" :key="tool.id" :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="tool-col">
            <tool-card :tool="tool" />
          </el-col>
        </el-row>
      </div>

      <div v-if="toolsByCategory.length === 0" class="empty-state">
        <el-empty description="暂无可用工具" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import ToolCard from '@/components/ToolCard.vue'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'Home',
  components: {
    ToolCard,
    Plus
  },
  props: {
    id: {
      type: String,
      required: false
    }
  },
  computed: {
    ...mapState(['toolsByCategory', 'loading', 'error']),
    
    filteredToolsByCategory() {
      if (!this.id) return this.toolsByCategory
      
      return this.toolsByCategory
        .filter(group => group.category.id === parseInt(this.id))
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    ...mapActions(['fetchToolsByCategory']),
    
    async loadData() {
      try {
        await this.fetchToolsByCategory()
      } catch (error) {
        console.error('Error loading tools:', error)
      }
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 16px;
  color: #606266;
}

.category-section {
  margin-bottom: 40px;
}

.category-title {
  font-size: 22px;
  color: #303133;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
  margin-bottom: 20px;
}

.tool-col {
  margin-bottom: 20px;
}

.empty-state {
  padding: 40px 0;
}

.action-buttons {
  margin-top: 20px;
}
</style> 